<template>
    <div class="box">
        <el-drawer custom-class="info" size="20%" @closed="closed" v-model="props.drawer" :with-header="false">
            <template #default>
                <div class="center">
                    <div class="item" v-show="userstore.token">
                        <div style="display: flex;flex-direction: column;align-items: center;">

                            <el-upload :on-change="change" ref="upload" :on-exceed="handleExceed" :on-success="success"
                                :show-file-list="false" v-model:file-list="fileList" class="upload-demo"
                                action="/api/upimages" multiple :limit="1">
                                <button> <img :src="avatarimg ? avatarimg : ''" alt=""></button>
                            </el-upload>
                            <span>{{ userstore.userinfo.nickname }}</span>
                            <span>{{ userstore.userinfo.sex }}</span>
                            <span>{{ userstore.userinfo.age }}岁</span>
                            <span>{{ userstore.userinfo.intruduce }}</span>
                            <el-button type="primary" size="small" @click="updateinfo"
                                style="font-size: .2667rem;font-family: '楷体';">修改</el-button>
                        </div>
                    </div>
                    <div class="nologo" v-show="!userstore.token">
                        <div class="logitem" @click="tologo">
                            <div> 未登录</div>
                            <div><el-icon>
                                    <ArrowRight size="20" />
                                </el-icon></div>
                        </div>
                    </div>
                    <el-dialog width="30%" v-model="dialogFormVisible" title="修改信息">
                        <el-form :model="userinfo">
                            <el-form-item style="width: 50%;" label="昵称" :label-width="80">
                                <el-input v-model="userinfo.nickname" autocomplete="off" />
                            </el-form-item>
                            <el-form-item style="width: 50%;" label="性别" :label-width="80">
                                <el-select v-model="userinfo.sex" placeholder="选择">
                                    <el-option label='男' value="男" />
                                    <el-option label="女" value="女" />
                                    <el-option label="保密" value="保密" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width: 30%;" label="年龄" :label-width="80">
                                <el-input type="number" v-model="userinfo.age" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="个人说明" :label-width="80">
                                <el-input v-model="userinfo.intruduce" autocomplete="off" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="confirm">
                                    修改
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
                <div class="otherinfo">
                    <div class="otherinfo_item" @click="tomypic">
                        <div class="otherinfo_item_left">
                            <div><el-icon size=".2667rem">
                                    <Document />
                                </el-icon></div>
                            <span>我的作品</span>
                        </div>
                        <div class="otherinfo_item_right"><el-icon>
                                <ArrowRight size=".2667rem" />
                            </el-icon></div>
                    </div>
                    <div class="otherinfo_item" @click="mylove">
                        <div class="otherinfo_item_left">
                            <div><el-icon size=".2667rem">
                                    <HelpFilled />
                                </el-icon></div>
                            <span>我的收藏</span>
                        </div>
                        <div class="otherinfo_item_right"><el-icon>
                                <ArrowRight size=".2667rem" />
                            </el-icon></div>
                    </div>
                    <div class="otherinfo_item" @click="logout" v-show="userstore.token">
                        <div class="otherinfo_item_left">
                            <div><el-icon size=".2667rem">
                                    <UserFilled />
                                </el-icon></div>
                            <span>退出登录</span>
                        </div>
                        <div class="otherinfo_item_right"><el-icon>
                                <ArrowRight size=".2667rem" />
                            </el-icon></div>
                    </div>
                </div>
            </template>
        </el-drawer>
        <div class="uploader">

        </div>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { Document, UserFilled, ArrowRight, HelpFilled } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/module/user'
// import userUserRouter from "@/store/module/user"
// import { DELE_TOEKN, DELE_USER } from '@/utils/token'
let $router = useRouter()
let userstore = useUserStore()
const $emit = defineEmits(['close'])
const props = defineProps(['drawer'])
const activeName = ref('1')
const dialogFormVisible = ref<Boolean>(false)
const fileList = ref([])
const userinfo = reactive<any>({
    nickname: '',
    sex: '',
    age: '',
    intruduce: ''
})
const avatarimg = ref<any>('')
onMounted(() => {
    // @ts-ignore
    userinfo.nickname = userstore.userinfo.nickname
    userinfo.sex = userstore.userinfo.sex
    userinfo.age = userstore.userinfo.age
    userinfo.intruduce = userstore.userinfo.intruduce
    avatarimg.value = userstore.userinfo.avatar
})
const closed = () => {
    console.log('2')
    activeName.value = ''
    $emit('close')
}
//修改资料
const updateinfo = () => {
    console.log('666')
    dialogFormVisible.value = true
}
const confirm = async () => {
    console.log(userinfo)
    try {
        await userstore.upinfos(userinfo, userstore.userinfo._id)
        dialogFormVisible.value = false
        userstore.userinfo.nickname = userinfo.nickname
        userstore.userinfo.sex = userinfo.sex
        userstore.userinfo.age = userinfo.age
        userstore.userinfo.intruduce = userinfo.intruduce
        ElMessage({
            message: "修改成功",
            type: 'success'
        })
    } catch (error) {
        ElMessage({
            message: "登录信息已过期",
            type: 'error'
        })
        $router.push('/login')
        userstore.logout()
    }
}
//修改头像
const success = async (e: any) => {

    try {
        let data = {
            path: e.data.path,
            id: userstore.userinfo._id
        }
        avatarimg.value = e.data.path
        console.log(data)
        await userstore.upavatar(data)
        userstore.userinfo.avatar = e.data.path
        ElMessage({
            message: '修改成功',
            type: 'success'
        })
    } catch (error) {
        console.log(error)
        ElMessage({
            message: '失败',
            type: 'error'
        })
    }
    console.log(e, '1')
}
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

// @ts-ignore
const change = (e: any) => {
    fileList.value = []

}
//退出登录
const logout = () => {
    userstore.logout()
}
//未登录去登陆
const tologo = () => {
    console.log('dsad')
    $router.push('/login')
}
const tomypic = () => {
    $router.push('/mywork')
}
//我的收藏
const mylove = () => {
    console.log(',y')
    $router.push('/mylove')
}

</script>

<style lang="scss" scoped>
.box {
    ::v-deep .el-drawer {
        background-color: #A9B4C0;
    }

    .info {

        .center {
            ::v-deep .el-input {

                input[type="number"]::-webkit-inner-spin-button {
                    display: none;
                }
            }

            .nologo {
                .logitem {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1vw;
                    font-family: '楷体';
                    cursor: pointer;
                }

            }

            .item {
                display: flex;
                justify-content: center;
                font-size: 1vw;
                font-family: '楷体';

                button {
                    width: 3vw;
                    height: 3vw;
                    border-radius: 100%;
                    border: 0;
                }

                span {
                    margin: .0667rem 0;
                }

                img {
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;

                }
            }
        }

        .otherinfo {
            .otherinfo_item {
                padding: 1vh;
                cursor: pointer;
                margin-top: 1vh;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .otherinfo_item_left {
                    display: flex;
                    align-items: center;

                    span {
                        font-size: 1vw;
                        font-family: '楷体';
                    }
                }

                &:hover {
                    background-color: #A7C0CE;
                }
            }
        }
    }
}
</style>